import React from 'react'
import { Button } from '../ui/Button'
import { NotificationPreferences } from '../../types/auth'
import { ArrowLeft, ArrowRight, Bell, Mail, Calendar } from 'lucide-react'

interface NotificationPreferencesStepProps {
  preferences: Partial<NotificationPreferences>
  onUpdate: (preferences: Partial<NotificationPreferences>) => void
  onNext: () => void
  onPrevious: () => void
}

export function NotificationPreferencesStep({
  preferences,
  onUpdate,
  onNext,
  onPrevious
}: NotificationPreferencesStepProps) {
  const updatePreference = (key: keyof NotificationPreferences, value: any) => {
    onUpdate({ ...preferences, [key]: value })
  }

  return (
    <div className="bg-white rounded-xl shadow-sm p-8">
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-2">
          Notification Preferences
        </h2>
        <p className="text-gray-600">
          Choose how you'd like to be notified about new papers and updates.
        </p>
      </div>

      <div className="space-y-6">
        {/* Email Notifications */}
        <div className="border border-gray-200 rounded-lg p-6">
          <div className="flex items-start space-x-4">
            <div className="p-2 bg-blue-50 rounded-lg">
              <Mail className="h-5 w-5 text-blue-600" />
            </div>
            <div className="flex-1">
              <div className="flex items-center justify-between mb-2">
                <h3 className="font-semibold text-gray-900">Email Notifications</h3>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input
                    type="checkbox"
                    checked={preferences.email_notifications ?? true}
                    onChange={(e) => updatePreference('email_notifications', e.target.checked)}
                    className="sr-only peer"
                  />
                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
              <p className="text-sm text-gray-600">
                Receive email notifications for important updates and alerts
              </p>
              
              {preferences.email_notifications && (
                <div className="mt-4 space-y-3">
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      checked={preferences.paper_recommendations ?? true}
                      onChange={(e) => updatePreference('paper_recommendations', e.target.checked)}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    />
                    <span className="ml-3 text-sm text-gray-700">Paper recommendations</span>
                  </label>
                  
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      checked={preferences.weekly_digest ?? true}
                      onChange={(e) => updatePreference('weekly_digest', e.target.checked)}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    />
                    <span className="ml-3 text-sm text-gray-700">Weekly digest</span>
                  </label>
                  
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      checked={preferences.instant_alerts ?? false}
                      onChange={(e) => updatePreference('instant_alerts', e.target.checked)}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                    />
                    <span className="ml-3 text-sm text-gray-700">Instant alerts for keyword matches</span>
                  </label>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Digest Frequency */}
        <div className="border border-gray-200 rounded-lg p-6">
          <div className="flex items-start space-x-4">
            <div className="p-2 bg-purple-50 rounded-lg">
              <Calendar className="h-5 w-5 text-purple-600" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-gray-900 mb-2">Digest Frequency</h3>
              <p className="text-sm text-gray-600 mb-4">
                How often would you like to receive your personalized paper digest?
              </p>
              
              <div className="space-y-2">
                {[
                  { value: 'daily', label: 'Daily', description: 'Get updates every day' },
                  { value: 'weekly', label: 'Weekly', description: 'Once per week (recommended)' },
                  { value: 'monthly', label: 'Monthly', description: 'Once per month' }
                ].map(option => (
                  <label key={option.value} className="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
                    <input
                      type="radio"
                      name="digest_frequency"
                      value={option.value}
                      checked={preferences.digest_frequency === option.value}
                      onChange={(e) => updatePreference('digest_frequency', e.target.value as 'daily' | 'weekly' | 'monthly')}
                      className="mt-1 text-blue-600 focus:ring-blue-500"
                    />
                    <div className="ml-3">
                      <div className="font-medium text-gray-900">{option.label}</div>
                      <div className="text-sm text-gray-600">{option.description}</div>
                    </div>
                  </label>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Additional Preferences */}
        <div className="border border-gray-200 rounded-lg p-6">
          <div className="flex items-start space-x-4">
            <div className="p-2 bg-green-50 rounded-lg">
              <Bell className="h-5 w-5 text-green-600" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-gray-900 mb-4">Additional Alerts</h3>
              
              <div className="space-y-3">
                <label className="flex items-start">
                  <input
                    type="checkbox"
                    checked={preferences.author_updates ?? true}
                    onChange={(e) => updatePreference('author_updates', e.target.checked)}
                    className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <div className="ml-3">
                    <div className="font-medium text-gray-900">Author Updates</div>
                    <div className="text-sm text-gray-600">Get notified when your favorite authors publish new papers</div>
                  </div>
                </label>
                
                <label className="flex items-start">
                  <input
                    type="checkbox"
                    checked={preferences.keyword_matches ?? true}
                    onChange={(e) => updatePreference('keyword_matches', e.target.checked)}
                    className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <div className="ml-3">
                    <div className="font-medium text-gray-900">Keyword Matches</div>
                    <div className="text-sm text-gray-600">Receive alerts when papers match your keywords</div>
                  </div>
                </label>
                
                <label className="flex items-start">
                  <input
                    type="checkbox"
                    checked={preferences.new_category_papers ?? true}
                    onChange={(e) => updatePreference('new_category_papers', e.target.checked)}
                    className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <div className="ml-3">
                    <div className="font-medium text-gray-900">Category Updates</div>
                    <div className="text-sm text-gray-600">Stay updated with new papers in your selected categories</div>
                  </div>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="flex justify-between mt-8 pt-6 border-t border-gray-200">
        <Button variant="outline" onClick={onPrevious}>
          <ArrowLeft className="mr-2 h-4 w-4" /> Back
        </Button>
        
        <Button onClick={onNext}>
          Continue <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </div>
    </div>
  )
}